<%@ include file="/WEB-INF/jsp/include/head.jsp" %><%@ page language="java" pageEncoding="UTF-8"%>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="${locale}">
<head>
    <meta http-equiv="Expires" content="0" /> 
    <meta http-equiv="Pragma" content="No-cache" /> 
    <meta http-equiv="Cahe-Control" content="No-cache" />
    <%@ include file="/WEB-INF/jsp/include/title.jsp" %>
    <%//@ include file="/WEB-INF/jsp/include/common_css.jsp" %>
    <link rel="stylesheet" type="text/css" media="screen" href="<c:url value="/css/sns.css"/>"/>
    <%//@ include file="/WEB-INF/jsp/include/common_script.jsp" %>
    <script type="text/javascript">
    //<![CDATA[
    //]]>
    </script>
	<style type="text/css">
		.border {
			border-bottom: 1px solid gray
		}
		.status {
			font:1.15em/1.1 'Lucida Grande',sans-serif;
			height:2.5em;
			overflow:auto;
			width:543px;
		}
		.more {
			background-color:#FFFFFF;
			background-image:url("http://s.twimg.com/a/1278188204/images/more.gif");
			background-position:left top;
			background-repeat:repeat-x;
			border-color:#DDDDDD #AAAAAA #AAAAAA #DDDDDD;
			border-style:solid;
			border-width:1px;
			display:block;
			font-size:14px;
			font-weight:bold;
			height:22px;
			line-height:1.5em;
			margin-bottom:6px;
			outline:medium none;
			padding:6px 0;
			text-align:center;
			text-shadow:1px 1px 1px #FFFFFF;
			width:543px;
		}
		
		.ta {
		    border:medium none;
		    font-size:13px;
		    height:21px;
		    margin:0;
		    outline:medium none;
		    overflow:hidden;
		    padding:0;
		    vertical-align:bottom;
		    width:100%;
		    line-height:21px;
		    color:#777777;
		    font-family:"lucida grande",tahoma,verdana,arial,sans-serif;
		}
		
		.tae {
		    min-height:60px;
		    background-color:#FFFFFF;
		    border:medium none;
		    cursor:text;
		    font-size:13px;
		    margin:0;
		    max-height:200px;
		    outline:medium none;
		    overflow-x:hidden;
		    overflow-y:auto;
		    padding:0;
		    width:100%;
		    word-break:break-all;
		}
	</style>
</head>
<body style="width:1024px;  border: 0px solid #ff0033;">
    <div class="blueBar"></div>
    <div class="container">
        <div class="head2">
            <h1>
                <a href="<c:url value="/sns/index.do"/>" class="pageLogo">GeekSaga SNS Portal</a>
            </h1>
            <div class="headNav" style="top: 10px;">
                <div>
                    <form action="#" class="navSearch">
                        <div class="uiTypeahead">
                            <div class="wrap">
                                <div class="uiSearchInput">
                                    <input type="text" class="inputtext textInput" value="Search"/>
                                    <button title="Search">
                                      <span>Search</span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>
                    <ul class="pageNav">
                        <li>
                            <a href="<c:url value="/sns/home.do"/>">Home</a>
                        </li>
                        <li>
                            <a href="#">Profile</a>
                        </li>
                        <li>
                            <a href="<c:url value="/sns/logout.do"/>"><spring:message code="button.logout"/></a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="content">
            <div class="mainContent">
                <div class="leftCol">
                    <img src="<c:url value="/img/no_profile_picture.gif"/>" width="50" height="50" />
                    <sec:authorize ifAllGranted="ROLE_USER">
                        <sec:authentication property="principal.username"/>
                    </sec:authorize>
                </div>
                <div class="contentCol">
                    <div class="rightCol">
                        <img src="<c:url value="/img/no_profile_picture.gif"/>" width="50" height="50" /><br />
                        <img src="<c:url value="/img/no_profile_picture.gif"/>" width="50" height="50" /><br />
                        <img src="<c:url value="/img/no_profile_picture.gif"/>" width="50" height="50" /><br />
                        <img src="<c:url value="/img/no_profile_picture.gif"/>" width="50" height="50" /><br />
                        <img src="<c:url value="/img/no_profile_picture.gif"/>" width="50" height="50" />
                    </div>
                    <div class="contentArea">
						<c:set value="${requestScope.hasMoreData}" var="hasMoreData"></c:set>
						<c:set value="${requestScope.friendsTimeLine}" var="friendsTimeLine"></c:set>
						<div class="uiHeaderPage">
                            <div class="uiHeaderTop">
                                <i class="uiHeaderImage"></i>
                                <h2 class="uiHeaderTitle" style="margin-left: 20px">
                                What’s happening?
                                </h2>
                            </div>
                        </div>
						<form:form method="post">
                        <div style="padding: 0; margin: 0 10px 5px;">
                            <div class="UIComposer_InputArea tt">
                                <div id="SAGAEditorBox" class="NewHighLight">
									<textarea id="tweet" name="tweet" class="ta" tabindex="1" autocomplete="off" accesskey="u" name="status" id="status" rows="2" cols="40"></textarea>
                                </div>
                            </div>
                        </div>
                        <div class="UIComposer_ButtonArea" style="display: none">
                            <ul>
                                <li>
                                    <label class="UIComposer_SubmitButton">
										<span id="saveProgress" style="display: none">Wait...</span>
                                        <input type="button" value="Tweet" onclick="addTweet(); return false;"/>
                                    </label>
                                </li>
                            </ul>
                        </div>
                        </form:form>
						<ul id="contents">
							<c:forEach items="${friendsTimeLine}" var="item">
							<li class="pvm uiListVerticalItemBorder uiListItem uiListLight t-1">
									<div class="pic">
										<img src="${item.profileImgURL}" />
									</div>
									<div style="margin-right: 10px; margin-top: 10px; width: 460px; float:right;">
										<div style="float: left; font-weight: bold; color:#2276BB; cursor: pointer;">${item.screenName}</div>
										<div>&nbsp;${item.text}</div>
										<div style="float: left">via ${item.source}</div>
										<div style="font-weight: bold; cursor: pointer" onclick="addScreenName('${item.screenName}'); return false;">&nbsp;Reply</div>
										<div style="clear: left"></div>
									</div>
							</li>
							</c:forEach>
                        </ul>
						<c:if test="${hasMoreData ne 'false'}">
							<a id="more" href="#" class="more" onclick="getNextData(); return false;">More</a>
						</c:if>
						<div>
							<a href="#" onclick="postURL('<c:url value='getMyInfo.do' />'); return false;">Your informations</a><br/>
							<a href="#" onclick="postURL('<c:url value='getFollowing.do' />'); return false;">Following</a><br/>
							<a href="#" onclick="postURL('<c:url value='getFollowers.do' />'); return false;">Followers</a>
						</div>
				     </div>
                 </div>
             </div>
         </div>
         <div style="clear:both; margin-left: 180px; margin-top: 4px; padding-top:6px;">GeekSaga @2010</div>
    </div>
	<%@ include file="/WEB-INF/jsp/include/common_script.jsp" %>
	<script type="text/javascript" src="<c:url value="/js/editor/editor.js"/>"></script>
	<script type="text/javascript">	
		var pageNo = 2;	  
		function getNextData() {
			$("#more").html("Loading..");
			jQuery.getJSON("<c:url value='/sns/twitter/timeLineAjax.do'/>",
					{pageNo: pageNo++}, 
					function(data) {
						$("#more").html("More");
	            		$.each(data.friendsTimeLine, function(i, item) {
		            		var img = $("<div style='float:left'>").append($("<img/>").attr("src", item.profileImgURL)).append("</div>");
		            		var div = $("<div>").append(img)
		            							.append("<div style='float: left; font-weight: bold; color:#2276BB; cursor: pointer;'>" + item.screenName + "</div>")
		            							.append("<div>" + "&nbsp;" + item.text + "</div>")
		            							.append("<div style='float: left'>" + "via " + item.source + "</div>")
		            							.append("<div style=\"font-weight: bold; cursor: pointer\" onclick=\"addScreenName('" + item.screenName + "'); return false;\">&nbsp;Reply</div>")
		            							.append("<div style='clear: left'></div>")
		            							.append("</div>")
		            							.addClass("border");
	  							$("#contents").append(div);
	            		}
		    		);
			});
		}
	
		function addTweet() {
			$("#saveProgress").show();
			jQuery.post("<c:url value='/sns/twitter/addTweet.do'/>",
			{tweet: $("#tweet").val()}, 
			function(lastMyTweet) {
				var img = $("<div class='pic'>").append($("<img/>").attr("src", lastMyTweet.profileImgURL)).append("</div>");
	          		var div = $("<li class='pvm uiListVerticalItemBorder uiListItem uiListLight t-1'>").append(img)
	          							.append("<div style='float: left; font-weight: bold; color:#2276BB; cursor: pointer;'>" + lastMyTweet.screenName + "</div>")
	          							.append("<div>" + "&nbsp;" + lastMyTweet.text + "</div>")
	          							.append("<div style='float: left'>" + "via " + lastMyTweet.source + "</div>")
	          							.append("<div style=\"font-weight: bold; cursor: pointer\" onclick=\"addScreenName('" + lastMyTweet.screenName + "'); return false;\">&nbsp;Reply</div>")
	          							.append("<div style='clear: left'></div>")
	          							.append("</li>")
	          							.addClass("border");
	
				//$("#contents").html(div.html() + $("#contents").html());
				div.insertBefore($("#contents").find("li").eq(0));
				$("#tweet").val("");
				$("#saveProgress").hide();
			}, "json");
		}
	
		function addScreenName(screenName) {
			var tweet = $("#tweet"); 
			tweet.val("@" + screenName + " " + tweet.val());
			tweet.focus();
		}
	
		function postURL(url) {
			var frm = $("form");
			frm.attr("method", "post");
			frm.attr("action", url);
			frm.submit();
		}
	
	    $("#tweet").focusin(function() {
	        $(this).removeClass("ta");
	        $(this).addClass("tae");
	        $(this).text("");
	
	        $(".UIComposer_ButtonArea").show();
	    });
	    
	    $("body").click(function(event) {
	        $("#tweet").removeClass("tae");
	        $("#tweet").addClass("ta");
	        
	        if($(event.target).is("input[type=submit]")) {
	            $("#tweet").text("What's on your issue?");
	        } else {
	            $(".UIComposer_ButtonArea").hide();
	        }
	        //$(this).text("What's on your issue?");
	    });
	</script>
</body>
</html>